<template>
  <div @keyup.enter="getData()">
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.batch_no" placeholder="批次号查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.bank_name" placeholder="银行名称查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <submit-list-dialog
      :visible.sync="viewVisible"
      :query-id="queryId"
      view-mode
    ></submit-list-dialog>

    <recommend-file-dialog
      :visible.sync="attachVisible"
      :batch-data="attachBatchData"
      view-mode
    ></recommend-file-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import SubmitListDialog from '@/bank/views/fast/recommend/SubmitListDialog'
import RecommendFileDialog from '@/bank/views/fast/recommend/RecommendFileDialog'

export default {
  components: {
    SubmitListDialog,
    RecommendFileDialog,
  },
  props: {},
  data() {
    return {
      params: {
        index: 1,
        size: 15,
        batch_no: '',
        bank_name: '',
        'claim_status.eq': 2,
        'confuse_status.eq': 3,
      },
      order: {
        claim_time: 'desc',
      },

      loading: false,
      exportLoading: false,
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '批次号', prop: 'batch_no', align: 'center' } },
        { attrs: { label: '项目数量', prop: 'project_amount', align: 'center' } },
        { attrs: { label: '授信金额(万元)', prop: 'project_funds', align: 'center' } },
        { attrs: { label: '银行机构', prop: 'bank_name', align: 'center' } },
        {
          attrs: { label: '银行推荐日期', prop: 'create_time', align: 'center' },
          process: v => (v || '').substring(0, 10),
        },
        {
          attrs: { label: '受理日期', prop: 'claim_time', align: 'center' },
          process: v => (v || '').substring(0, 10),
        },
        {
          attrs: { label: '操作', align: 'center', width: 170 },
          operations: [
            { content: '附件（推荐函）', icon: 'fa fa-clipboard', event: this.handleAttach },
            { content: '项目明细', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],

      // 查看
      viewVisible: false,
      queryId: '',

      // 附件
      attachVisible: false,
      attachBatchData: {},
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData({
          table: 'customer_related_quick_batch',
          params: this.params,
          order: this.order,
        })
        .then(res => {
          const data = res.data || {}
          this.totalCount = data.totalCount || 0
          this.tableData = (data.data || []).map(this.dataAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      return item
    },

    handleView(row = {}) {
      this.queryId = row.customer_related_quick_batch_id
      this.viewVisible = true
    },

    handleAttach(row = {}) {
      this.attachBatchData = { ...row }
      this.attachVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
